<template>
	<view>
		<!-- 创建 -->
		<view class="edit_wrap">
			<view class="w100p item">
				<view class="title">
					<text>*</text>{{$t('商品名称')}}
				</view>
				<view class="input_wrap">
					<input class="w100p" v-model="formData.goods" :placeholder="$t('请输入商品名称')" />
				</view>
			</view>
			<view class="w100p item">
				<view class="title">
					<text>*</text>{{$t('商品类型')}}
				</view>
				<view class="input_wrap" :class="{empty: !formData.typeName}" @click="openList('typeShow')">
					{{$t(formData.typeName || '请选择商品类型')}}
				</view>
				<image v-show="!formData.goods_type" class="icon" src="@/static/index2/index14.png" mode=""></image>
			</view>
			<view class="w100p item">
				<view class="title">
					<text>*</text>{{$t('商品分类')}}
				</view>
				<view class="input_wrap" :class="{empty: !formData.p_category_id}"
					@click="openList('classificationShow')">
					{{$t(formData.classificationName || '请选择商品分类')}}
				</view>
				<image v-show="!formData.p_category_id" class="icon" src="@/static/index2/index14.png" mode="">
				</image>
			</view>
			<view class="w100p item">
				<view class="title">
					<text>*</text>{{$t('二级分类')}}
				</view>
				<view class="input_wrap" :class="{empty: !formData.category_id}"
					@click="openList('classificationTwoShow')">
					{{$t(formData.classificationTwoName || '请选择二级分类')}}
				</view>
				<image v-show="!formData.category_id" class="icon" src="@/static/index2/index14.png" mode="">
				</image>
			</view>
			<view class="w100p item">
				<view class="title">
					<text>*</text>{{$t('采购数量')}}
				</view>
				<view class="input_wrap">
					<input class="w100p input" type="number" v-model="formData.number" :placeholder="$t('请输入采购数量')" />
				</view>
			</view>
			<view class="w100p item">
				<view class="title">
					<text>*</text>{{$t('采购总重量(kg)')}}
				</view>
				<view class="input_wrap">
					<input class="w100p input" type="digit" v-model="formData.weight" :placeholder="$t('请输入采购总重量')" />
				</view>
			</view>
			<view class="w100p item">
				<view class="title">
					<text>*</text>{{$t('采购总体积(m³)')}}
				</view>
				<view class="input_wrap">
					<input class="w100p input" type="digit" v-model="formData.volume" :placeholder="$t('请输入采购总体积')" />
				</view>
			</view>
			<view class="w100p item">
				<view class="title">
					<text>*</text>{{$t('交货日期')}}
				</view>
				<view class="input_wrap" :class="{empty: !formData.send_goods_date}"
					@click="openList('finishDateShow')">
					{{$t(formData.send_goods_date || '请选择交货日期')}}
				</view>
				<image v-show="!formData.send_goods_date" class="icon" src="@/static/index2/index14.png" mode="">
				</image>
			</view>
		</view>
		<view class="w100p create_wrap">
			<view class="w100p create_btn btn1" @click="submitPlan">{{$t('生成计划')}}</view>
		</view>
		<!-- 商品类型 -->
		<u-select class="w100p" v-model="typeShow" :confirm-text="$t('确定')" :cancel-text="$t('取消')" :list="typeList"
			@confirm="confirmType" :default-value="[this.defaultType]"></u-select>
		<!-- 商品分类 -->
		<u-select class="w100p" v-model="classificationShow" :confirm-text="$t('确定')" :cancel-text="$t('取消')"
			:list="classificationList" @confirm="confirmClassification"
			:default-value="[this.defaultClassification]"></u-select>
		<!-- 商品二级分类 -->
		<u-select class="w100p" v-model="classificationTwoShow" :confirm-text="$t('确定')" :cancel-text="$t('取消')"
			:list="classificationTwoList" @confirm="confirmClassificationTwo"
			:default-value="[this.defaultClassificationTwo]"></u-select>
		<!-- 交货日期 -->
		<u-picker v-model="finishDateShow" :minDate="minDate" :params="params" mode="time" :confirm-text="$t('确认')"
			:cancel-text="$t('取消')" :show-time-tag="false" @confirm="confirmDate" />
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: {},
				required: false
			},
			lang: {
				type: String,
				default: "zh",
				required: true
			},
			langName: {
				type: String,
				default: "name",
				required: true
			},
			typeList: {
				type: Array,
				default: [],
				required: true
			},
			classificationList: {
				type: Array,
				default: [],
				required: true
			}
		},
		data() {
			return {
				formData: {
					id: 0,
					user_id: uni.getStorageSync('userInfoFull').user_id,
					goods: null,
					goods_type: null,
					typeName: null,
					p_category_id: null,
					classificationName: null,
					category_id: null,
					classificationTwoName: null,
					number: null,
					weight: null,
					volume: null,
					send_goods_date: null
				},

				typeShow: false,
				defaultType: 0,

				classificationShow: false,
				defaultClassification: 0,

				classificationTwoList: [],
				classificationTwoShow: false,
				defaultClassificationTwo: 0,

				minDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				finishDateShow: false,
			}
		},
		onLoad() {

		},
		created() {
			if (!this.item) {
				this.formData = {
					id: 0,
					user_id: uni.getStorageSync('userInfoFull').user_id,
					goods: null,
					goods_type: null,
					typeName: null,
					p_category_id: null,
					classificationName: null,
					category_id: null,
					classificationTwoName: null,
					number: null,
					weight: null,
					volume: null,
					send_goods_date: null
				}
			} else {
				this.getConfirmClassTwo(this.item.p_category.id);
				let goods = this.lang === "zh" ? this.item.goods : this.item.goods_ru;
				this.formData = {
					id: 1,
					user_id: uni.getStorageSync('userInfoFull').user_id,
					goods: goods,
					goods_type: this.item.goods_type,
					typeName: null,
					p_category_id: this.item.p_category.id,
					classificationName: this.item.p_category[this.langName],
					category_id: this.item.category.id,
					classificationTwoName: this.item.category[this.langName],
					number: this.item.number,
					weight: this.item.weight,
					volume: this.item.volume,
					send_goods_date: this.item.send_goods_date
				}
				this.typeList.some(item => {
					if (item.value == this.item.goods_type) {
						this.formData.typeName = item.label;
						return true;
					}
					return false;
				})
				console.log(this.formData, this.item)
			}
		},
		methods: {
			// 选择商品类型
			confirmType(e) {
				this.formData.goods_type = e[0].value;
				this.formData.typeName = e[0].label;
				this.defaultType = e[0].extra.sort;
			},
			// 选择商品分类
			confirmClassification(e) {
				this.formData.p_category_id = e[0].value;
				this.formData.classificationName = e[0].label;
				this.defaultClassification = e[0].extra.sort;
				this.formData.classificationTwo = null;
				this.formData.classificationTwoName = null;
				this.defaultClassificationTwo = 0;
				this.getConfirmClassTwo(e[0].value);
			},
			// 选择商品二级分类
			confirmClassificationTwo(e) {
				this.formData.category_id = e[0].value;
				this.formData.classificationTwoName = e[0].label;
				this.defaultClassificationTwo = e[0].extra.sort;
			},
			// 选择交货日期
			confirmDate(e) {
				let time = e.year + '-' + e.month + '-' + e.day;
				let timestamp = new Date(time).getTime();
				let timeday = new Date(this.minDate).getTime();
				if (Number(timestamp) < Number(timeday)) {
					uni.showToast({
						title: this.$t('交货时间不能小于今天哦'),
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				this.formData.send_goods_date = time;
			},
			// 打开选择列表
			openList(val) {
				if (val === 'classificationTwoShow' && !this.formData.p_category_id) {
					uni.showToast({
						title: this.$t('商品分类不能为空'),
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				this[val] = true;
			},
			// 获取二级分类列表
			async getConfirmClassTwo(id) {
				try {
					let data = {
						type: 'release_goods',
						pid: id,
						needLogin: true,
						lang: this.lang,
					}
					let res = await this.$u.api.basic.getActionSheetList(data);
					if (!!res?.length) {
						this.classificationTwoList = res.map((item, index) => {
							let obj = {
								label: item[this.langName],
								value: item.id,
								extra: {
									...item,
									sort: index,
								}
							}
							return obj;
						})
					}
				} catch (e) {
					// this.classificationTwoList = [];
				}
			},
			// 生成计划
			async submitPlan() {
				// 校验
				if (!this.formData.goods) {
					uni.showToast({
						title: this.$t('请输入商品名称'),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.formData.goods_type) {
					uni.showToast({
						title: this.$t('请选择商品类型'),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.formData.p_category_id) {
					uni.showToast({
						title: this.$t('请选择商品分类'),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.formData.category_id) {
					uni.showToast({
						title: this.$t('请选择二级分类'),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.formData.number) {
					uni.showToast({
						title: this.$t('请输入采购数量'),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.formData.weight) {
					uni.showToast({
						title: this.$t('请输入采购总重量'),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.formData.volume) {
					uni.showToast({
						title: this.$t('请输入采购总体积'),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.formData.send_goods_date) {
					uni.showToast({
						title: this.$t('请选择交货日期'),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				uni.showLoading({
					title: this.$t('加载中')
				})
				try {
					let data = {
						id: this.formData.id,
						user_id: this.formData.user_id,
						goods: this.formData.goods,
						goods_type: this.formData.goods_type,
						p_category_id: this.formData.p_category_id,
						category_id: this.formData.category_id,
						number: this.formData.number,
						weight: this.formData.weight,
						volume: this.formData.volume,
						send_goods_date: this.formData.send_goods_date
					}
					let res = await this.$u.api.buyer.savePurchaseWork(data);
					uni.hideLoading();
					if (!!res) {
						this.$emit("createSuccess")
					}

				} catch (e) {
					uni.hideLoading();
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	.w100p {
		width: 100%;
	}

	.edit_wrap {
		width: 690rpx;
		min-height: 540rpx;
		background-color: #fff;
		margin-top: 40rpx;
		border-radius: 32rpx;
		padding: 6rpx 30rpx;
		z-index: 2;

		.item {
			padding: 14rpx 0 14rpx;
			border-bottom: 1px solid #D8D8D8;
			display: flex;
			align-items: center;

			.title {
				font-size: 24rpx;
				line-height: 1.2;
				color: #1D1D1D;
				width: 200rpx;
				margin-right: 10rpx;

				text {
					color: #E20E1D;
					margin-right: 6rpx;
				}
			}

			::v-deep .input_wrap {
				flex: 1;
				text-align: right;
				font-size: 24rpx;
				line-height: 1.2;

				&.empty {
					color: #999999;
				}

				uni-input {
					font-size: 24rpx;
					height: 40rpx;
					line-height: 40rpx;
				}

				.uni-input-input {
					font-size: 24rpx;
					height: 40rpx;
					line-height: 40rpx;
				}

				.uni-input-placeholder {
					color: #999999;
					font-size: 24rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}

			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-left: 8rpx;
			}

			&:last-child {
				border-bottom: 0;
			}
		}
	}

	.create_wrap {
		padding: 30rpx;
		width: 540rpx;
		margin: 0 auto;

		.create_btn {
			height: 90rpx;
			border-radius: 90rpx;
			background: linear-gradient(180deg, #30F998 0%, #0D7DE2 98%), #5282E6;
			text-align: center;
			line-height: 90rpx;
			font-size: 28rpx;
			color: #fff;
			margin-top: 40rpx;
		}
	}
</style>